<template>
<div class="Personaldata">
    <w-header></w-header>
    <b-container>
        <b-row class="Jben">
            <b-col>
                <h3>基本设置</h3>
            </b-col>
            <h4>头像</h4>
            <div class="demo-image__preview">
                <el-image style="width: 100px; height: 100px" :src="user.avatar" :preview-src-list="srcList">
                </el-image>
            </div>
        </b-row>
        <form>
            <b-row class="mt-4">
                <label>手机号码</label>
                <b-col md="4" class="mt-2">
                    <el-input :disabled="true" :placeholder="'手机号码为：' + user.phone"></el-input>
                </b-col>

            </b-row>
            <b-row class="mt-4">
                <label>昵称</label>
                <b-col md="4" class="mt-2">
                    <input type="text" class="form-control" v-model="user.username" /></b-col>
            </b-row>
            <b-row class="mt-4">
                <label>您的注册时间为：</label>
                <b-col md="4" class="mt-2">
                    <el-input :placeholder="user.registerTime" suffix-icon="el-icon-date" :disabled="true">
                    </el-input>
                </b-col>
            </b-row>
            <b-row class="mt-4">
                <label>个人简介</label>
                <b-col md="4" class="mt-2">
                    <textarea class="form-control" placeholder="个人简介"></textarea>
                </b-col>
            </b-row>
            <b-row class="mt-4">
                <label>uid</label>
                <b-col md="4" class="mt-2">
                    <el-input :disabled="true" :placeholder="'uid为：' + user.uid"></el-input>
                </b-col>
            </b-row>
            <b-row class="mt-4">
                <label>性别</label>
                <b-col md="4" class="mt-2"><input type="radio" name="sex" v-model="user.gender" value="1" />男<input type="radio" name="sex" v-model="user.gender" value="0" />女<input type="radio" name="sex" v-model="user.gender" value="2" />不明</b-col>
            </b-row>
            <b-row class="mt-4">
                <b-col md="4" class="mt-2">
                    <el-button type="button" class="btn btn-primary" @click="Modifytheuser">开始修改</el-button>
                </b-col>
            </b-row>
        </form>
    </b-container>
    <!-- currentUser -->
    <!-- registerTime 注册时间 -->
    <!-- gender 性别 -->
</div>
</template>

<script>
export default {
    name: "Personaldata",
    data() {
        return {
            user: {
                username: "",
                avatarUrl: "",
                gender: "",
                phone: "",
                uid: "",
                avatar: "",
                registerTime: "",
            },
            srcList: ['']
        };
    },
    created() {
        this.current();
    },

    methods: {
        current() {
            this.$userApi.currentUser(this.user).then((res) => {
                console.log(res);
                if (res.data) {
                    this.user = res.data;
                    this.user.avatarUrl = res.data.avatar
                    this.srcList[0] = res.data.avatarUrl

                }
            });
        },
        Modifytheuser() {
            this.$userApi.modifyingCurrentUser(this.user).then((res) => {
                console.log(res);
                this.$router.go(0);
            });
        },
    },
};
</script>

<style>
.Jben {
    margin-top: 50px;

}
</style>
